<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            class Zoom {
                constructor (selector){
                    this.wrap = document.querySelector(selector)
                    this.box = this.wrap.querySelector('.box')
                    this.span = this.box.querySelector('span')
                    this.bigBox = this.wrap.querySelector('.bigBox')
                    this.img = this.bigBox.querySelector('img')
                    this.bindEvent()
                }
                bindEvent (){
                    this.box.onmouseenter = () =>{
                        this.appear('block')  
                    }
                    this.box.onmouseleave = () =>{
                        this.appear('none')
                    }
                    this.box.onmousemove = (e) => {
                        let left = e.pageX - this.box.offsetLeft - this.span.offsetWidth/2,
                            top = e.pageY - this.box.offsetTop - this.span.offsetHeight/2
                            this.move(left,top)
                    }
                }
                appear (sele){
                    this.span.style.display = sele
                    this.bigBox.style.display = sele
                }
                move(left,top){
                    if(left <=0 ) left = 0
                    if(left >= this.box.clientWidth - this.span.offsetWidth){
                        left = this.box.clientWidth - this.span.offsetWidth
                    }
                    if(top <=0) top = 0
                    if(top >= this.box.clientHeight - this.span.offsetHeight){
                        top = this.box.clientHeight - this.span.offsetHeight
                    }
                    this.span.style.left = left + 'px'
                    this.span.style.top = top + 'px'
                    this.img.style.left = -2 * left + 'px'
                    this.img.style.top = -2 * top + 'px'
                }
            }
            new Zoom('#wrap')
        }
        
    </script>
</head>
    <style>
        #wrap {
            position: relative;
        }
        .box {
            position: relative;
            width: 400px;
            height: 400px;
        }
        .box img {
            width: 400px;
        }
        .box span {
            position: absolute;
            display: none;
            width: 200px;
            height: 200px;
            background-color: rgba(255,15,0, 0.3);
            cursor: move;
            left: 0;
            top: 0;
        }
        .bigBox {
            display: none;
            position: absolute;
            left: 410px;
            top: 0;
            width: 400px;
            height: 400px;
            overflow: hidden;
        }
        .bigBox img {
            position: absolute;
        }
    </style>
<body>
    <div id="wrap">
        <div class="box">
            <img src="img/1.jpg" alt="">
            <span></span>
        </div>
        <div class="bigBox">
            <img src="img/1.jpg" alt="">
        </div>
    </div>
</body>
</html>